<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostGoodsPayloadType } from '@/api/goods/types'
import type { FormRules, FormInstance } from 'element-plus'

import { reactive, ref } from 'vue'

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<PostGoodsPayloadType>({
	goods_name: '',
	goods_num: 0,
	market_price: 0,
	shop_price: 0,
	img: '',
	store_id: 0
})
const formRules = reactive<FormRules>({
	goods_name: [{ required: true, message: '商品名称必须', trigger: 'blur' }],
	goods_num: [{ required: true, message: '库存必须', trigger: 'blur' }],
	market_price: [{ required: true, message: '市场价必须', trigger: 'blur' }],
	shop_price: [{ required: true, message: '销售价必须', trigger: 'blur' }],
	img: [{ required: true, message: '封面必须', trigger: 'blur' }],
	store_id: [{ required: true, message: '所属门店必须', trigger: 'blur' }]
})

// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	formRef.value?.validate((isSuccess) => {
		if (isSuccess) {
			console.log('立即创建：', formData)
		}
	})
}
const handleReset = () => {
	formRef.value!.resetFields()
}
</script>

<template>
	<el-card>
		<!-- 标题 -->
		<template #header>
			<span>商品创建</span>
			<el-button type="default" @click="$router.push('/goods')">返回</el-button>
		</template>
		<!-- 标题 -->

		<!-- 内容 -->
		<el-form label-width="80" size="large" :model="formData" :rules="formRules" ref="formRef">
			<el-form-item label="商品名称" prop="goods_name">
				<el-input placeholder="请输入商品名称" v-model="formData.goods_name" />
			</el-form-item>
			<el-form-item label="库存" prop="goods_num">
				<el-input placeholder="请输入库存" v-model="formData.goods_num" />
			</el-form-item>
			<el-form-item label="市场价" prop="market_price">
				<el-input placeholder="请输入市场价" v-model="formData.market_price" />
			</el-form-item>
			<el-form-item label="销售价" prop="shop_price">
				<el-input placeholder="请输入销售价" v-model="formData.shop_price" />
			</el-form-item>
			<el-form-item label="头像">
				<QfUpload />
			</el-form-item>
			<el-form-item label="所属门店" prop="store_id">
				<el-select placeholder="请选择所属门店" v-model="formData.store_id">
					<el-option label="门店1" :value="1"></el-option>
					<el-option label="门店2" :value="2"></el-option>
					<el-option label="门店3" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit">立即创建</el-button>
				<el-button type="default" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容 -->
	</el-card>
</template>

<style lang="scss" scoped>
.el-card {
	overflow-y: scroll;

	.el-form {
		max-width: 600px;
	}
}
</style>
